<template>
	<view>
	<view class="logo">
		<image src="http://127.0.0.1:4001/images/static/login/ymlogo.png" mode="" class="img"></image>
		<view class="login">登录</view>
	</view>
		<view class="main">
			<u-form :model="form" ref="uForm" :rules="rules">
				<u-form-item label="手机号" labelWidth="160" prop='phone'>
					<view class="country">
						<view @click="chooseCountry">{{'+'+country}}
							<image src="http://127.0.0.1:4001/images/static/login/Arrows／left@2x.png" mode="" class="choose"></image>
						</view>
						<u-input v-model="form.phone" placeholder='请输入手机号' />
					</view>

				</u-form-item>
				<u-form-item label="验证码" labelWidth="160" prop='verificationCode'>
					<view class="yzm ">
						<u-input v-model="form.verificationCode" class="form-item" placeholder="请输入验证码"
							style="width: 200rpx;margin-right: 40rpx;" />
						<view class="wrap">
							<u-toast ref="uToast"></u-toast>
							<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
								@change="codeChange"></u-verification-code>
							<view style="color: #5FC484;" @tap="getCode">{{tips}}</view>
						</view>
					</view>

				</u-form-item>
			


			</u-form>
			<view class="btn" @click="submit">立即注册</view>
			<view class="yhtl">
				
				<view class="gx">
					<u-checkbox v-model="value" shape="circle" @change="checkboxChange">
						
					</u-checkbox>我已阅读并同意
					<text class="col-g" @click="handleXI">《用户协议》</text>
					<text class="col-g" @click="handleYX">《隐私协议》</text>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import request from "@/http/request.js";
	export default {
		data() {
			return {
				//选择的国家
				country: '86',
				//判断是否勾选
				value: false,
				tips: '',
				// refCode: null,
				seconds: 60,
				form: {
					phone: '',
					studentCode: '123',
					
					osRegister: 'H5',
					verificationCode:''

				},
				rules: {
					phone: [
						// 对name字段进行长度验证
						{
							required: true,
							message: "请输入手机号码",
							trigger: "blur"
						},
						{
							min: /^1[3456789]\d{9}$/,
							message: "手机号码格式不正确",
							trigger: "blur"
						}


					],
				verificationCode: [
				        {
				            required: true,
				            message: "验证码不能为空",
				            trigger: "blur"
				        }
				    ],
				
				}

			}
		},
		onLoad(params) {
			console.log('params', params);
				
			if(params.studentCode){
				this.form.studentCode = params.studentCode
			}
			if(params.code){
				this.country = params.code
			}
			
		},
		onReady() {
			// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会
			// 造成循环引用而报错，如果你想这样做，请在非data中定义refCode变量
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			codeChange(text) {
				console.log("触发了吗")
				this.tips = text;
			},

			getCode() {
				if(this.form.phone){
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码',
					
						})
						  const requestData = {
						            mobile: this.form.phone, // 手机号
						            country: this.country, // 国家代码
						        };
								console.log("验证码数据",requestData)
						        // 发送验证码请求示例（使用uni.request或其他HTTP请求库）
						        uni.request({
						            url: 'https://api.ymwfy.com/api/Member/SendCode',
						            method: 'GET',
						            data: requestData,
						            success: (res) => {
						                console.log('验证码请求成功', res);
						
						                // 隐藏加载提示	
						                uni.hideLoading();
						
						                if (res.statusCode === 200 ) {
						                    // 验证码请求成功后，开始倒计时
						                    this.$refs.uCode.start();
						                    this.$u.toast('验证码已发送');
						                } else {
						                    uni.$u.toast('验证码发送失败，请稍后再试');
						                }
						            },
						            fail: (err) => {
						                console.error('验证码请求失败', err);
						                uni.hideLoading();
						                uni.$u.toast('网络请求失败，请稍后再试');
						            }
						        });
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				}else{
					this.$u.toast('请填写手机号');
				}
			},
			end() {
				this.$u.toast('倒计时结束');
				console.log("触发了吗结束")
			},
			start() {
				this.$u.toast('倒计时开始');
				console.log("触发了开始")
			},
			submit() {
				console.log("提交")
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						if (this.value) {
							console.log('form表单数据', this.form)
							const requestData = {
								account: this.form.phone,
								osRegister: this.form.osRegister,
								verificationCode:this.form.verificationCode,
								country:this.country
							};
							console.log('发送的数据',requestData)
							// 发送POST请求示例（使用uni.request或其他HTTP请求库）
							uni.request({
								url: 'https://api.ymwfy.com/api/Member/MobileRegiest',
								method: 'POST',
								data: requestData,
								success: (res) => {
									console.log('后端响应', res);
									// 根据后端响应处理逻辑，例如成功后跳转到其他页面
									if (res.statusCode === 200 && res.data.isSucceed === true) {
										uni.navigateTo({
											url: '/pages/mine/mine'
										});
									} else {
										uni.$u.toast('注册失败，请重试');
									}
								},
								fail: (err) => {
									console.error('请求失败', err);
									uni.$u.toast('网络请求失败，请稍后再试');
								}
							});
						} else {
							uni.$u.toast('请勾选《用户协议》《隐私协议》！')
						}
					} else {
						console.log('验证失败');
					}
				})
			},
			checkboxChange(e) {
				console.log('e', e);
				// 	this.value = e.detail.value;
				// console.log(this.value);
				if (e.value == false) {
					uni.$u.toast('请勾选《用户协议》《隐私协议》！')
				} else {
					console.log('勾选成功')
				}
			},
			chooseCountry() {
				uni.navigateTo({
					url: '/pagesSetting/setting/phoneSetting'
				})
			},
			//跳转隐私协议
				 handleXI() {
				    // 打开用户协议的外部URL，替换成您的实际URL
				    const userAgreementURL = 'http://mw.ymwfy.com/miaowa_useragreement.html';
				    uni.navigateTo({
				      url: `../webView/webView?url=${encodeURIComponent(userAgreementURL)}`,
				    });
				  },
				  handleYX() {
				    // 打开隐私协议的外部URL，替换成您的实际URL
				    const privacyPolicyURL = 'http://mw.ymwfy.com/miaowa_Privacyagreement.html';
				    uni.navigateTo({
				      url: `../webView/webView?url=${encodeURIComponent(privacyPolicyURL)}`,
				    });
				  },
		}
	}
</script>

<style lang="scss" scoped>
	.logo{
		width: 100%;
		text-align: center;
		margin-top: 80rpx
	}
	.img{
		width: 260rpx;
		height: 260rpx;
		
	}
	.login{
		font-size: 40rpx;
		font-weight: bold;
		
	}

	.main {
		width: 750rpx;
		height: 1136rpx;
		background: #FFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		opacity: 1;
		position: relative;
		
		padding: 50rpx 80rpx;
	}

	.yzm {
		display: flex;

	}

	.btn {
		margin: 0 auto;
		width: 560rpx;
		height: 96rpx;
		background: #0FE3BD;
		border-radius: 80rpx 80rpx 80rpx 80rpx;
		opacity: 0.5;
		text-align: center;
		line-height: 96rpx;
		color: #FFF;
		margin-top: 40rpx;
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.gx {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;

	}

	.yhtl {
		margin-top: 30rpx;
		text-align: center;
	}

	.choose {
		width: 24rpx;
		height: 24rpx;
		vertical-align: middle;
	}

	.country {
		display: flex;
	}
	.col-g{
		color:  #0FE3BD;;
	}
</style>